<script type="text/javascript">
  var select_current_nw = new Array();
  var select_current_vif = new Array();

  <% @vifs.each do |vif| %>
    select_current_nw.push("<%= vif['network_id'] %>");
    select_current_vif.push("<%= vif['vif_id'] %>");
  <% end %>
</script>

<div id="edit_instance_dialog">
  <table>
    <tr>
      <td><%= t("dialog.edit_instance.instance_id")%>: </td>
      <td><%= @instance_id %></td>
      <td><input type="hidden" id="instance_id" value="<%= @instance_id %>"></td>
    </tr>
    <tr>
      <td><%= t("dialog.edit_instance.display_name")%>: </td>
      <td><input id="instance_display_name" type="text" size=43 value="<%= @display_name %>"></td>
    </tr>
    <tr>
      <td><%= t("dialog.launch_instance.ssh_key_pair") %>:</td>
      <td id="select_ssh_key_pair"></td>
    </tr>
  </table>
  <span id="change_key_pair_message"></span>
  <br />

  <fieldset id="security_group_field" class="with_border">
		<legend><%= t("dialog.edit_instance.security_group") %></legend><legend>
		</legend><table cellspacing="5" cellpadding="5">
		<tbody>
			<tr><th><span id="available_groups"><%= t("dialog.edit_instance.available_groups") %></span></th>
			<th></th>
			<th><span id="assign_groups"><%= t("dialog.edit_instance.groups_to_assign") %></span></th>
		</tr><tr>
		    <td>
		        <select id="left_select_list" size="5" multiple="multiple" name="left_select_list"></select>
		    </td>
				<td id="manipulation">
					<button id="right_button">&gt;</button>
					<br> <br>
					<button id="left_button">&lt;</button>
				</td>
		    <td>
		        <select id="right_select_list" size="5" multiple="multiple" name="right_select_list">
		        </select>
		    </td>
			</tr>
		</tbody>
	</table>
  </fieldset>
  
  <br />
  
  <fieldset id="interfaces_field" class="with_border">
    <legend><%= t("dialog.edit_instance.interface") %></legend>
  <table>
    <% @vifs.each_index do |index| %>
      <tr>
        <td>eth<%= index %>:</td>
        <td><%= @vifs[index]["vif_id"] %></td>
        <td id="eth<%= index %>_network_id"></td>
        <td>
          <select id="eth<%= index %>" name="eth<%= index %>">
            <option value="disconnected"></option>
          </select>
        </td>
        <td id="vif_button_eth<%= index %>"></td>
      </tr>
    <% end %>
  </table>
  </fieldset>

  <br>
  
  <fieldset id="network_service_monitor_field" class="with_border">
    <legend><%= t("dialog.launch_instance.network_service_monitor.title") %></legend>
    <table>
      <tbody>
        <tr>
          <td><%= t("dialog.launch_instance.network_service_monitor.monitoring_enabled")%>:</td>
          <td><input type="checkbox" id="monitoring_enabled" <%= @monitoring['enabled'] == true ? "checked" : "" %>></input></td>
        </tr>
        <tr>
          <td><%= t("dialog.launch_instance.network_service_monitor.mailaddr")%>:</td>
          <td><input type="text" id="mailaddr_0" class="mailaddr_form" value="<%= @monitoring['mail_address'][0] %>"></input></td>
        </tr>
        <tr>
          <td></td>
          <td><input type="text" id="mailaddr_1" class="mailaddr_form" value="<%= @monitoring['mail_address'][1] %>"></input></td>
        </tr>
        <tr>
          <td></td>
          <td><input type="text" id="mailaddr_2" class="mailaddr_form" value="<%= @monitoring['mail_address'][2] %>"></input></td>
        </tr>
      </tbody>
    </table>
    <table style="width: 100%;">
      <thead>
        <tr>
          <th style="width: 20%;"><%= t("dialog.launch_instance.network_service_monitor.list_headers.protocol") %></th>
          <th style="width: 60%;"><%= t("dialog.launch_instance.network_service_monitor.list_headers.parameters") %></th>
          <th style="width: 10%;"><%= t("dialog.launch_instance.network_service_monitor.list_headers.enabled") %></th>
          <th style="width: 10%;"></th>
        <tr>
      </thead>
      <script id="monitor_selector_tmpl" type="text/x-jquery-tmpl">
	<tr id="monitor_item_${idx}">
	  <td>
            <select class="select_monitor_proto" name="monitor_item[${idx}][title]">
	      {{each(index,item) itemlist}}
              <option value="${index}">${item.title}</option>
              {{/each}}
            </select>
          </td>
          <td class="detail_input">
          </td>
          <td class="check_enable">
            <input type="checkbox" class="enabled" value="true" checked></input>
          </td>
          <td style="align: right;">
            <button id="del_monitor_item_${idx}" class="del_monitor_item">-</button>
          </td>
	</tr>
      </script>
      <tbody id="monitor_item_list">
      </tbody>
      <tfoot>
        <tr>
	  <td colspan="4"><button id="add_monitor_item">+</button></td>
	</tr>
      </tfoot>
    </table>
  </fieldset>
</div>
